---
import clsx from "clsx";
interface Props {
  cols?: 2 | 3 | 4;
}

const { props } = Astro;
---

<div
  class={clsx("grid grid-reset-margin gap-2 my-4", {
    "sm:grid-cols-2": !props.cols || props.cols === 2,
    "sm:grid-cols-3": props.cols === 3,
    "sm:grid-cols-4": props.cols === 4
  })}
>
  <slot />
</div>
